<template>
  <div class="calendar-container">
    <!-- 标题 -->
    <el-header class="calendar-header">
      <h1 class="title">种植计划录入</h1>
    </el-header>

    <!-- 年份和月份选择 -->
    <div class="controls">
      <el-select v-model="selectedYear" placeholder="选择年份" class="year-select">
        <el-option v-for="year in years" :key="year" :label="year" :value="year" />
      </el-select>
      <el-select v-model="selectedMonth" placeholder="选择月份" class="month-select">
        <el-option v-for="month in months" :key="month.value" :label="month.label" :value="month.value" />
      </el-select>
    </div>

    <!-- 日历表格 -->
    <div class="calendar-grid">
      <!-- 星期标题 -->
      <div class="day-header" v-for="day in days" :key="day">{{ day }}</div>

      <!-- 日期格子 -->
      <div
          class="day"
          v-for="day in daysInMonth"
          :key="day.date ? day.date.toISOString() : 'empty'"
          @click="addEvent(day.date)"
          :class="{ 'empty-day': !day.date }"
      >
        <div class="date">{{ day.date ? day.date.getDate() : '' }}</div>
        <div class="events">
          <div v-for="(event, index) in day.events" :key="index" class="event-item">
            <el-tag type="info" size="small" class="event-tag">
              {{ event }}
              <el-button
                  type="text"
                  class="delete-button"
                  @click.stop="deleteEvent(day.date, index)"
              >
                <el-icon><Close /></el-icon>
              </el-button>
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加事务的对话框 -->
    <el-dialog v-model="dialogVisible" title="添加事务" width="50%">
      <el-input v-model="newEvent" placeholder="请输入事务内容" />
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEvent">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Close } from '@element-plus/icons-vue'; // 引入删除图标

export default {
  components: {
    Close, // 注册删除图标
  },
  data() {
    return {
      selectedYear: new Date().getFullYear(),
      selectedMonth: new Date().getMonth(),
      years: Array.from({ length: 10 }, (_, i) => new Date().getFullYear() + i),
      months: [
        { label: '一月', value: 0 },
        { label: '二月', value: 1 },
        { label: '三月', value: 2 },
        { label: '四月', value: 3 },
        { label: '五月', value: 4 },
        { label: '六月', value: 5 },
        { label: '七月', value: 6 },
        { label: '八月', value: 7 },
        { label: '九月', value: 8 },
        { label: '十月', value: 9 },
        { label: '十一月', value: 10 },
        { label: '十二月', value: 11 },
      ],
      days: ['日', '一', '二', '三', '四', '五', '六'],
      events: {},
      dialogVisible: false,
      selectedDate: null,
      newEvent: '',
    };
  },
  computed: {
    daysInMonth() {
      const year = this.selectedYear;
      const month = this.selectedMonth;
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const days = [];

      // 填充空白日期
      for (let i = 0; i < firstDay.getDay(); i++) {
        days.push({ date: null, events: [] });
      }

      // 填充当前月份的日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i);
        const dateString = date.toISOString().split('T')[0];
        days.push({ date, events: this.events[dateString] || [] });
      }

      return days;
    },
  },
  methods: {
    addEvent(date) {
      if (!date) return; // 忽略空白日期
      this.selectedDate = date;
      this.newEvent = ''; // 清空输入框
      this.dialogVisible = true; // 打开对话框
    },
    saveEvent() {
      if (this.newEvent) {
        const dateString = this.selectedDate.toISOString().split('T')[0];
        if (!this.events[dateString]) {
          this.events[dateString] = [];
        }
        this.events[dateString].push(this.newEvent);
        this.dialogVisible = false; // 关闭对话框
        this.$forceUpdate(); // 强制更新视图
      }
    },
    deleteEvent(date, index) {
      const dateString = date.toISOString().split('T')[0];
      if (this.events[dateString]) {
        this.events[dateString].splice(index, 1); // 删除对应的事务
        this.$forceUpdate(); // 强制更新视图
      }
    },
  },
};
</script>

<style scoped>
.calendar-container {
  font-family: Arial, sans-serif;
  width: 50%; /* 与对话框宽度一致 */
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #d9ecff; /* 淡蓝色边框 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #f0f8ff; /* 淡蓝色背景 */
}

.calendar-header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-family: 'Georgia', serif; /* 使用更优雅的字体 */
  font-size: 32px;
  font-weight: bold;
  color: #409eff; /* Element Plus 主题色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.year-select,
.month-select {
  width: 150px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day-header {
  text-align: center;
  font-weight: bold;
  padding: 15px;
  background-color: #409eff; /* Element Plus 主题色 */
  color: #ffffff;
  border-radius: 8px;
  font-size: 14px;
}

.day {
  border: 1px solid #d9ecff; /* 淡蓝色边框 */
  border-radius: 8px;
  padding: 15px;
  min-height: 120px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  background-color: #ffffff; /* 白色背景 */
}

.day:hover {
  background-color: #e6f7ff; /* 悬停时淡蓝色背景 */
  transform: translateY(-2px);
}

.empty-day {
  background-color: #f5f7fa; /* 空白日期格子背景色 */
  cursor: default;
}

.date {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.events {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.event-item {
  display: flex;
  align-items: center;
}

.event-tag {
  margin-right: 5px;
  background-color: #ecf5ff; /* 淡蓝色背景 */
  border-color: #d9ecff; /* 淡蓝色边框 */
  color: #409eff; /* 蓝色文字 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete-button {
  margin-left: 5px;
  color: #f56c6c; /* 红色删除按钮 */
  padding: 0;
  font-size: 12px;
}

.delete-button:hover {
  color: #ff7875; /* 悬停时更亮的红色 */
}
</style>
